<template>
    <div class="page-box">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageQuery.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
        </el-pagination>
    </div>
</template>

<script>

export default {
    name: 'PaginationComponent',
    props: {
        pageQuery: {
            type: Object,
            default: function () {
                return {}
            }
        },
        pageTotal: {
            type: Number,
            default:0,
        }
    },
    computed: {
    },
    methods: {
        handleSizeChange(val) {
            console.log(val);
            this.$emit('handleSizeChange', val);
        },
        handleCurrentChange(val) {
            console.log(val);
            this.$emit('handleCurrentChange', val);
        },
    }

}
</script>

<style lang="scss" scoped>
.page-box {
    text-align: center;
}

// 表格图片
.el-image__error,
.el_image,
img {
    width: 60px;
    height: 60px;
    // border-radius: 50%;
}
</style>